import React from 'react'
import Logo from '../../component/logo/logo'
import {Redirect} from 'react-router-dom'
import imoocFrom from '../../component/imooc-form/imooc-form'

import {
    List,
    Radio,
    InputItem,
    WingBlank,
    WhiteSpace,
    Button
} from 'antd-mobile'
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'

@connect(state => state.user, {register})
@imoocFrom
class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            eye: 'open'
        }
        
        this.handleregister = this
            .handleregister
            .bind(this)

            this.login = this
            .login
            .bind(this)
    }
    componentDidMount(){
        this.props.handleChange('type','genius')
    }
    login(){
        this.props.history.push('/login') 
    }
    dva(type) {
        this.setState({eye: type})
    }
    handleregister() {
        this
            .props
            .register(this.props.state)
        //this.props.history.push('/register')
    } 
    render() {
        const RadioItem = Radio.RadioItem;
        return (
            
            <div>
                {this.props.redirectTo
                    ? <Redirect to={this.props.redirectTo}/>
                    : null}
                <Logo eye={this.state.eye}/>
                <h2>这是注册页面</h2>
                <List>
                    {this.props.msg
                        ? <p className='error-msg'>{this.props.msg}</p>
                        : null}
                    <InputItem onChange={v => this.props.handleChange('user', v)}>用户</InputItem>
                    <WhiteSpace/>
                    <InputItem
                        type='password'
                        onBlur={() => {
                        this.dva('open')
                    }}
                        onFocus={() => {
                        this.dva('close')
                    }}
                        onChange={v => this.props.handleChange('pwd', v)}>密码</InputItem>
                    <WhiteSpace/>
                    <InputItem
                        type='password'
                        onBlur={() => {
                        this.dva('open')
                    }}
                        onFocus={() => {
                        this.dva('close')
                    }}
                        onChange={v => this.props.handleChange('repeatpwd', v)}>确认密码</InputItem>
                    <WhiteSpace/>
                    <RadioItem
                        onChange={v => this.props.handleChange('type', 'genius')}
                        checked={this.props.state.type === 'genius'}>牛人</RadioItem>
                    <RadioItem
                        onChange={v => this.props.handleChange('type', 'boss')}
                        checked={this.props.state.type === 'boss'}>boss</RadioItem>
                    <WhiteSpace/> {/* <Button type='primary' onClick={this.register}>注册</Button> */}

                </List>
                <WingBlank>
                    <Button onClick={this.login} type='primary'>登录</Button>
                    <WhiteSpace/>
                    <Button onClick={this.handleregister} type='primary'>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Register